<template>
    <PopUpWindow winWidth="34%" closeSize="1.6" winHeight="434px">
        <div class="container">
            <TreeList :treeData="treeData" :isEdit="false"/>
        </div>
    </PopUpWindow>
</template>
<script setup>
import PopUpWindow from './PopUpWindow.vue';
import TreeList from './TreeList.vue';
import { defineProps, onMounted } from 'vue';

const props = defineProps({
    catalogue: Object
})
let treeData = [
    //测试数据
    // {
    //   id: 0,
    //   label: "课程目录",
    //   depth: 0,
    //   children: [
    //     {
    //         id: 0,
    //         label: "课程目录",
    //         depth: 1,
    //         isLeft: true,
    //         content: "123123"
    //     },
    //     {
    //         id: 1,
    //         label: "课程目录",
    //         depth: 1,
    //         isLeft: true,
    //         content: "123123"
    //     },
    //     {
    //         id: 2,
    //         label: "课程目录",
    //         depth: 1,
    //         isLeft: true,
    //         content: "123123"
    //     },
    //     {
    //         id: 3,
    //         label: "课程目录",
    //         depth: 1,
    //         isLeft: true,
    //         content: "123123"
    //     },
    //     {
    //         id: 4,
    //         label: "课程目录",
    //         depth: 1,
    //         isLeft: true,
    //         content: "123123"
    //     },
    //     {
    //         id: 5,
    //         label: "课程目录",
    //         depth: 1,
    //         isLeft: true,
    //         content: "123123"
    //     },
    //     {
    //         id: 6,
    //         label: "课程目录",
    //         depth: 1,
    //         isLeft: true,
    //         content: "123123"
    //     },
    //     {
    //         id: 7,
    //         label: "课程目录",
    //         depth: 1,
    //         isLeft: true,
    //         content: "123123"
    //     },
    //     {
    //         id: 8,
    //         label: "课程目录",
    //         depth: 1,
    //         isLeft: true,
    //         content: "123123"
    //     },
    //     {
    //         id: 9,
    //         label: "课程目录",
    //         depth: 1,
    //         isLeft: true,
    //         content: "123123"
    //     } ,
    //     {
    //         id: 10,
    //         label: "课程目录",
    //         depth: 1,
    //         isLeft: true,
    //         content: "123123"
    //     },
    //     {
    //         id: 11,
    //         label: "课程目录",
    //         depth: 1,
    //         isLeft: true,
    //         content: "123123"
    //     } ,
    //     {
    //         id: 12,
    //         label: "课程目录",
    //         depth: 1,
    //         isLeft: true,
    //         content: "123123"
    //     } ,
    //     {
    //         id: 13,
    //         label: "课程目录",
    //         depth: 1,
    //         isLeft: true,
    //         content: "123123"
    //     } ,
    //     {
    //         id: 14,
    //         label: "课程目录",
    //         depth: 1,
    //         isLeft: true,
    //         content: "123123"
    //     } ,{
    //         id: 15,
    //         label: "课程目录",
    //         depth: 1,
    //         isLeft: true,
    //         content: "123123"
    //     }  

    //   ]
    // }
]
treeData.push(props.catalogue)

onMounted(()=>{
    let inputs = document.querySelector('.catalogue').querySelectorAll('input');
    console.log(inputs);
    for(let i = 0; i < inputs.length; i++){
        inputs[i].style.backgroundColor = '#ffffff'
    }
    let catalogue = document.querySelector('.catalogue');
    catalogue.style.width = '100%'
    let win = document.querySelector('.all')
    win.style.minWidth = '380px'
})
</script>
<style scoped>
.container{
    width: 84%;
    height: 80%;
    margin-top: 15%;
    margin-left: 14%;
}
</style>